@import '~@/theme';

.draggable-area {
  position: relative;

  .drop-area-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.75);
    opacity: 0;
  }

  .drop-area-border {
    border-radius: 2px;
    box-sizing: border-box;
    border: 2px solid @primary-color;
    filter: blur(1px);
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .drop-area-overlay,
  .drop-area-border {
    transition: opacity 0.2s ease-out, z-index 0s linear 0.2s;
  }

  &.dragging {
    .drop-area-overlay,
    .drop-area-border {
      transition: opacity 0.2s ease-out, z-index 0s linear 0s;
    }

    .drop-area-overlay,
    .drop-area-border {
      z-index: 999;
      opacity: 1;
    }
  }

  .movable-row.moving {
    transition: transform 0.12s ease-out;
    z-index: 1;

    > * {
      z-index: 9999;
      box-shadow: 0 0 0 #fff;
    }
  }
}
